<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>孕育宝典 - 伴侣绑定</title>
        <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
        <style>
            body {
                font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
                background-color: #f5f5f5;
                color: #333333;
                margin: 0;
                padding: 0;
            }
            .device-container {
                width: 390px;
                height: 844px;
                overflow: hidden;
                position: relative;
                background-color: #f5f5f5;
            }
            .status-bar {
                height: 44px;
                background-color: #ffffff;
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 0 20px;
                font-size: 14px;
                font-weight: 600;
            }
            .header {
                background-color: #ffffff;
                padding: 10px 16px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                border-bottom: 1px solid #f0f0f0;
            }
            .nav-bar {
                height: 60px;
                background-color: #ffffff;
                position: absolute;
                bottom: 0;
                width: 100%;
                display: flex;
                justify-content: space-around;
                align-items: center;
                border-top: 1px solid #f0f0f0;
            }
            .nav-item {
                display: flex;
                flex-direction: column;
                align-items: center;
                color: #666666;
                font-size: 10px;
            }
            .nav-item.active {
                color: #ff9fb5;
            }
            .main-content {
                height: calc(844px - 44px - 60px - 56px);
                overflow-y: auto;
                padding: 20px 16px;
            }
            .section-title {
                font-size: 16px;
                font-weight: 600;
                margin-bottom: 16px;
                color: #333;
            }
            .card {
                background-color: #ffffff;
                border-radius: 12px;
                padding: 20px;
                margin-bottom: 20px;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            }
            .illustration {
                width: 100%;
                max-width: 240px;
                height: auto;
                margin: 0 auto 20px;
                display: block;
            }
            .card-title {
                font-size: 16px;
                font-weight: 500;
                margin-bottom: 10px;
                text-align: center;
            }
            .card-desc {
                font-size: 14px;
                color: #666;
                line-height: 1.5;
                text-align: center;
                margin-bottom: 20px;
            }
            .info-list {
                margin-bottom: 20px;
            }
            .info-item {
                display: flex;
                align-items: flex-start;
                margin-bottom: 16px;
            }
            .info-icon {
                width: 28px;
                height: 28px;
                border-radius: 50%;
                background-color: #ffeaef;
                color: #ff9fb5;
                display: flex;
                justify-content: center;
                align-items: center;
                margin-right: 12px;
                flex-shrink: 0;
            }
            .info-content {
                flex: 1;
            }
            .info-title {
                font-size: 14px;
                font-weight: 500;
                margin-bottom: 4px;
            }
            .info-desc {
                font-size: 12px;
                color: #666;
                line-height: 1.5;
            }
            .button-primary {
                background-color: #ff9fb5;
                color: white;
                font-size: 16px;
                padding: 12px 0;
                border-radius: 8px;
                text-align: center;
                width: 100%;
                margin-bottom: 12px;
                font-weight: 500;
            }
            .button-secondary {
                background-color: #f5f5f5;
                color: #666;
                font-size: 16px;
                padding: 12px 0;
                border-radius: 8px;
                text-align: center;
                width: 100%;
                font-weight: 500;
            }
            .steps-container {
                margin-bottom: 24px;
            }
            .step-item {
                display: flex;
                position: relative;
                margin-bottom: 16px;
            }
            .step-item:last-child {
                margin-bottom: 0;
            }
            .step-item:not(:last-child)::after {
                content: '';
                position: absolute;
                top: 30px;
                left: 16px;
                width: 1px;
                height: calc(100% - 6px);
                background-color: #e0e0e0;
            }
            .step-number {
                width: 32px;
                height: 32px;
                border-radius: 50%;
                background-color: #ff9fb5;
                color: white;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 14px;
                margin-right: 12px;
                flex-shrink: 0;
                z-index: 1;
            }
            .step-content {
                flex: 1;
                padding-top: 6px;
            }
            .step-title {
                font-size: 14px;
                font-weight: 500;
                margin-bottom: 6px;
            }
            .step-desc {
                font-size: 12px;
                color: #666;
                line-height: 1.5;
            }
            .qr-code-container {
                display: flex;
                flex-direction: column;
                align-items: center;
                margin: 20px 0;
                background-color: #ffffff;
                border-radius: 12px;
                padding: 20px;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            }
            .qr-code {
                width: 200px;
                height: 200px;
                border: 1px solid #eee;
                padding: 10px;
                margin-bottom: 16px;
            }
            .qr-code-title {
                font-size: 14px;
                font-weight: 500;
                margin-bottom: 6px;
                text-align: center;
            }
            .qr-code-desc {
                font-size: 12px;
                color: #666;
                line-height: 1.5;
                text-align: center;
                margin-bottom: 16px;
            }
            .binding-status {
                display: flex;
                align-items: center;
                justify-content: center;
                margin-bottom: 16px;
            }
            .status-dot {
                width: 8px;
                height: 8px;
                border-radius: 50%;
                margin-right: 6px;
            }
            .status-dot.active {
                background-color: #4caf50;
            }
            .status-dot.waiting {
                background-color: #ff9800;
            }
            .status-text {
                font-size: 14px;
                color: #666;
            }
            .status-text.active {
                color: #4caf50;
            }
            .status-text.waiting {
                color: #ff9800;
            }
            .tips-section {
                background-color: #fff8e6;
                border-radius: 8px;
                padding: 16px;
                margin: 20px 0;
            }
            .tips-title {
                display: flex;
                align-items: center;
                font-size: 14px;
                font-weight: 500;
                color: #ff9800;
                margin-bottom: 10px;
            }
            .tips-title i {
                margin-right: 8px;
            }
            .tips-content {
                font-size: 12px;
                color: #666;
                line-height: 1.5;
            }
            .privacy-notice {
                font-size: 12px;
                color: #999;
                line-height: 1.5;
                text-align: center;
                margin-top: 20px;
            }
            .tabs {
                display: flex;
                background-color: #ffffff;
                border-radius: 8px;
                overflow: hidden;
                margin-bottom: 20px;
            }
            .tab {
                flex: 1;
                text-align: center;
                padding: 12px 0;
                font-size: 14px;
                color: #666;
                position: relative;
            }
            .tab.active {
                color: #ff9fb5;
                font-weight: 500;
            }
            .tab.active::after {
                content: '';
                position: absolute;
                bottom: 0;
                left: 25%;
                width: 50%;
                height: 2px;
                background-color: #ff9fb5;
            }
            .partner-card {
                display: flex;
                align-items: center;
                background-color: #ffffff;
                border-radius: 12px;
                padding: 16px;
                margin-bottom: 16px;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            }
            .partner-avatar {
                width: 60px;
                height: 60px;
                border-radius: 50%;
                object-fit: cover;
                margin-right: 16px;
            }
            .partner-info {
                flex: 1;
            }
            .partner-name {
                font-size: 16px;
                font-weight: 500;
                margin-bottom: 4px;
            }
            .partner-desc {
                font-size: 12px;
                color: #666;
                margin-bottom: 8px;
            }
            .sharing-status {
                font-size: 12px;
                color: #4caf50;
                display: flex;
                align-items: center;
            }
            .sharing-status i {
                margin-right: 4px;
            }
            .action-buttons {
                display: flex;
                gap: 10px;
                margin-top: 10px;
            }
            .action-button {
                flex: 1;
                padding: 8px 0;
                font-size: 12px;
                border-radius: 6px;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div class="device-container">
            <!-- iOS状态栏 -->
            <div class="status-bar">
                <span>9:41</span>
                <div class="flex items-center">
                    <i class="fas fa-signal mr-1"></i>
                    <i class="fas fa-wifi mr-1"></i>
                    <i class="fas fa-battery-full"></i>
                </div>
            </div>

            <!-- 页面头部 -->
            <div class="header">
                <div class="flex items-center">
                    <i class="fas fa-chevron-left mr-4"></i>
                    <h1 class="text-lg font-medium">伴侣绑定</h1>
                </div>
                <i class="fas fa-ellipsis-v"></i>
            </div>

            <!-- 标签页 -->
            <div class="tabs">
                <div class="tab active">绑定伴侣</div>
                <div class="tab">伴侣共享</div>
            </div>

            <!-- 主内容区 -->
            <div class="main-content">
                <!-- 介绍卡片 -->
                <div class="card">
                    <img
                        src="https://img.icons8.com/color/480/000000/couple-man-woman.png"
                        alt="伴侣插图"
                        class="illustration"
                    />
                    <h2 class="card-title">邀请伴侣共同见证精彩时刻</h2>
                    <p class="card-desc">
                        通过伴侣绑定功能，您可以与伴侣共享健康数据和重要时刻，一起参与到孕育的每个阶段。
                    </p>

                    <div class="info-list">
                        <div class="info-item">
                            <div class="info-icon">
                                <i class="fas fa-calendar-check"></i>
                            </div>
                            <div class="info-content">
                                <div class="info-title">共享经期和排卵数据</div>
                                <div class="info-desc">伴侣可以了解您的生理周期，帮助计划合适的受孕时机。</div>
                            </div>
                        </div>
                        <div class="info-item">
                            <div class="info-icon">
                                <i class="fas fa-baby"></i>
                            </div>
                            <div class="info-content">
                                <div class="info-title">共同记录胎儿成长</div>
                                <div class="info-desc">一起记录和分享超声照片、胎动次数等宝贵瞬间。</div>
                            </div>
                        </div>
                        <div class="info-item">
                            <div class="info-icon">
                                <i class="fas fa-bell"></i>
                            </div>
                            <div class="info-content">
                                <div class="info-title">重要提醒互通</div>
                                <div class="info-desc">产检预约、服药提醒等重要事项同步通知伴侣。</div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 绑定流程 -->
                <h2 class="section-title">绑定流程</h2>
                <div class="steps-container">
                    <div class="step-item">
                        <div class="step-number">1</div>
                        <div class="step-content">
                            <div class="step-title">生成专属邀请码</div>
                            <div class="step-desc">点击下方生成按钮获取专属二维码和邀请码。</div>
                        </div>
                    </div>
                    <div class="step-item">
                        <div class="step-number">2</div>
                        <div class="step-content">
                            <div class="step-title">分享给伴侣</div>
                            <div class="step-desc">将二维码或邀请码分享给您的伴侣，邀请码有效期为24小时。</div>
                        </div>
                    </div>
                    <div class="step-item">
                        <div class="step-number">3</div>
                        <div class="step-content">
                            <div class="step-title">伴侣接受邀请</div>
                            <div class="step-desc">伴侣需下载孕育宝典小程序，选择"伴侣登录"并输入邀请码。</div>
                        </div>
                    </div>
                    <div class="step-item">
                        <div class="step-number">4</div>
                        <div class="step-content">
                            <div class="step-title">绑定成功</div>
                            <div class="step-desc">绑定成功后，您可以设置数据共享范围和权限。</div>
                        </div>
                    </div>
                </div>

                <!-- 绑定二维码 -->
                <div class="qr-code-container">
                    <div class="binding-status">
                        <div class="status-dot waiting"></div>
                        <div class="status-text waiting">等待伴侣接受邀请...</div>
                    </div>
                    <img src="https://i.ibb.co/vsBMj30/qr-code-sample.png" alt="绑定二维码" class="qr-code" />
                    <div class="qr-code-title">您的邀请码</div>
                    <div class="qr-code-desc">伴侣可使用此邀请码进行绑定</div>

                    <div
                        class="text-center bg-gray-100 py-2 px-8 rounded-lg text-lg tracking-widest font-bold text-gray-700"
                    >
                        PYHG39
                    </div>

                    <div class="action-buttons mt-4 w-full">
                        <div class="action-button button-primary">复制邀请码</div>
                        <div class="action-button button-secondary">分享邀请</div>
                    </div>
                </div>

                <!-- 温馨提示 -->
                <div class="tips-section">
                    <div class="tips-title">
                        <i class="fas fa-lightbulb"></i>
                        <span>温馨提示</span>
                    </div>
                    <div class="tips-content">
                        <p>1. 每个邀请码有效期为24小时，过期后需重新生成。</p>
                        <p>2. 一个账号仅可绑定一个伴侣，如需更换请先解绑当前伴侣。</p>
                        <p>3. 绑定后，可在"伴侣共享"标签页设置共享范围。</p>
                    </div>
                </div>

                <!-- 隐私提示 -->
                <div class="privacy-notice">
                    我们重视您的隐私保护。您可随时在设置中控制共享内容范围，或解除伴侣绑定关系。
                </div>
            </div>

            <!-- 底部导航栏 -->
            <div class="nav-bar">
                <div class="nav-item">
                    <i class="fas fa-home text-xl mb-1"></i>
                    <span>首页</span>
                </div>
                <div class="nav-item">
                    <i class="fas fa-notes-medical text-xl mb-1"></i>
                    <span>记录</span>
                </div>
                <div class="nav-item">
                    <i class="fas fa-calendar-alt text-xl mb-1"></i>
                    <span>产检</span>
                </div>
                <div class="nav-item active">
                    <i class="fas fa-user-friends text-xl mb-1"></i>
                    <span>伴侣空间</span>
                </div>
                <div class="nav-item">
                    <i class="fas fa-user text-xl mb-1"></i>
                    <span>我的</span>
                </div>
            </div>
        </div>
    </body>
</html>
